<template xmlns="http://www.w3.org/1999/html">
    <div>


    <uploader ref="uploader" :options="options" :fileStatusText="fileStatusText" class="uploader-example">
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
            <p>拖拽文件到此处</p>
            <uploader-btn>选择文件</uploader-btn>
            <uploader-btn :attrs="attrs">选择图片</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
        <input :name="table_name" type="text" v-model="message" width="200px">
    </uploader>
</div>
</template>

<script>

    export default {

        props:['tablename','value'],
        data () {
            return {
                options: {
                    // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
                    target: '/api/upload',
                    testChunks: false,
                    chunkSize: 50 * 1024 * 1024,
                },
                fileStatusText: {
                    success: '成功',
                    error: '失败',
                    uploading: '上传中',
                    paused: '暂停',
                    waiting: '等待中'
                }
                ,
                table_name:this.tablename,
                message:this.value.split(','),
                //tablename1:this.tablename,
                attrs: {
                    accept: 'image/*'
                },

            }
        },
        methods: {

        },
        created () {
// 获取uploader对象

            this.$nextTick(() => {
                const uploader=this.$refs.uploader.uploader;
               //window.uploader = this.$refs
                uploader.on('fileAdded', function (file, event) {
                    console.log(file, event)
                })
// 单个文件上传成功
                uploader.on('fileSuccess',  (rootFile, file, message)=> {
                    console.log(message)
                    this.message.push(message);
                    //this.message.append(message);
                })
// 根下的单个文件（文件夹）上传完成
            /*    uploader.on('fileComplete', function (rootFile) {
                    console.log(rootFile)
                })
// 某个文件上传失败了
                uploader.on('fileError', function (rootFile, file, message) {
                    console.log(rootFile, file, message)
                })*/
            })

        }
    }
</script>

<style>
    .uploader-example {
        width: 880px;
        padding: 15px;
        margin: 40px auto 0;
        font-size: 12px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    }
    .uploader-example .uploader-btn {
        margin-right: 4px;
    }
    .uploader-example .uploader-list {
        max-height: 440px;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }
</style>